<script setup>
import CodeMirror from 'vue-codemirror6';
import { javascript } from '@codemirror/lang-javascript';
import { html } from '@codemirror/lang-html';
import { css } from '@codemirror/lang-css';
import { oneDark } from '@codemirror/theme-one-dark';

const extensions = [html(), css(), javascript(), oneDark];

const theme = {
    '&': {
        color: 'white',
        backgroundColor: '#034',
    },
    '.cm-content': {
        caretColor: '#0e9',
    },
    '&.cm-focused .cm-cursor': {
        borderLeftColor: '#0e9',
    },
    '&.cm-focused .cm-selectionBackground, ::selection': {
        backgroundColor: '#074',
    },
    '.cm-gutters': {
        backgroundColor: '#045',
        color: '#ddd',
        border: 'none',
    },
};

const code = ref(`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>这将是一段被编译的文本</p>
    <img src="http://p.aiu.pub/s/yiNK.webp"/>
</body>
</html>
`);

const getCode = () => {
    return code.value;
};
defineExpose({ getCode });
</script>

<template>
    <div class="editor-container" ref="$editor">
        <CodeMirror
            v-model="code"
            :theme="theme"
            placeholder="Code gose here..."
            :style="{ height: '100%' }"
            :autofocus="true"
            :tabSize="4"
            :extensions="extensions"
        />
    </div>
</template>

<style scoped lang="scss">
.editor-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #003344;
}

</style>
